<template>
  <div class="box">
    <!-- <div class="logon">已于 2022-10-01 被注销</div> -->
    <div class="company_title">
      <div
        class="enterprise_icon"
        :style="{ backgroundColor: details.background }"
      >
        {{ details.shortName }}
      </div>
      <div class="company_nameLabeling">
        <div class="company_name">{{ details.d2CorpName }}</div>
        <div class="company_Labeling">{{ details.corpKey }}</div>
      </div>
      <!-- <div class="interest_box" @click="interestClick">
        <div class="interest_icon">
          <img
            src="~img/lookAround/interest_icon.svg"
            v-show="jkJbxxSfxx.status == 1"
            alt=""
          />
          <img
            src="~img/lookAround/interest_icon_false.svg"
            v-show="jkJbxxSfxx.status == 0"
            alt=""
          />
        </div>
        <div class="interest" v-if="jkJbxxSfxx.status == 1">已关注</div>
        <div class="interest" v-if="jkJbxxSfxx.status == 0">关注</div>
      </div> -->
    </div>
    <div class="enterprise_type_box">
      <div
        class="enterprise_type djs_enterprise"
        v-for="(item, index) in details.labelList"
        :key="index"
        :style="{ color: item.fontColor, borderColor: item.fontColor }"
      >
        {{ item.name }}
      </div>
      <!-- <div class="enterprise_type gxjs_enterprise">高新技术企业</div>
      <div class="enterprise_type kjx_enterprise">科技型中小企业</div> -->
    </div>
    <div class="enterprise_info">
      <div class="enterprise_info_box">
        <div class="enterprise_info_title">法定代表人</div>
        <div class="enterprise_info_name">{{ details.d2LegalPer }}</div>
      </div>
      <div class="enterprise_info_cut"></div>
      <div class="enterprise_info_box">
        <div class="enterprise_info_title">注册资本</div>
        <div class="enterprise_info_name">{{ details.d2Regcap || "-" }}</div>
      </div>
      <div class="enterprise_info_cut"></div>
      <div class="enterprise_info_box">
        <div class="enterprise_info_title">成立日期</div>
        <div class="enterprise_info_name">{{ details.d2Esdate }}</div>
      </div>
    </div>
    <div class="general_situation">
      <div class="industry_classification">
        <div class="general_situation_name">行业分类</div>
        <div class="general_situation_text">{{ details.d2Industryco }}</div>
      </div>
      <!-- <div class="people_number">
        <div class="general_situation_name">公司人数</div>
        <div class="general_situation_text">
         
        {{ jkJbxxSfxx.d2Kjsbrs || "-" }} 
        </div>
      </div> -->
    </div>
    <div class="big_club"></div>
    <div class="basic_info">
      <!-- <div class="Enterprise_Info_three">
        <div class="telephone_icon">
          <img src="~img/lookAround/telephone_icon.svg" alt="" />
        </div>
        <div class="telephone_number" :href="'tel:' + details.d2Tel">{{
          details.d2Tel || "-"
        }}</div>
      </div> -->
      <div class="small_club"></div>
      <div class="Enterprise_Info_four" @click="addressClick">
        <div class="telephone_icon">
          <img src="~img/lookAround/coordinate_blue_icon.svg" alt="" />
        </div>
        <!-- <div class="coordinate_number">
          {{ details.distance * 1000 + "m" || "" }}
        </div> -->
        <!-- <div class="cut_apart2"></div> -->
        <div class="coordinate_name">
          {{ details.d2Dom }}
        </div>
      </div>
    </div>
    <div class="big_club"></div>
    <div>
      <businessInformation
        :delAll="this.delAll"
        :color="this.details.background"
      ></businessInformation>
    </div>
    <!-- <div class="label">
      <div class="label_one">
        <div class="label_box border-right" @click="businessInforClick">
          <div>
            <img src="~img/lookAround/business_info_icon.svg" alt="" />
          </div>
          <div>工商信息</div>
        </div>
        <div class="label_box border-right" @click="informationRat">
          <div>
            <img src="~img/lookAround/credit_rating_icon.svg" alt="" />
          </div>
          <div>信息评分</div>
        </div>
        <div class="label_box border-right" @click="businessTrends">
          <div>
            <img src="~img/lookAround/business_trends_icon.svg" alt="" />
          </div>
          <div>经营趋势</div>
        </div>
        <div class="label_box" @click="industryTrends">
          <div>
            <img src="~img/lookAround/Industry_trends.svg" alt="" />
          </div>
          <div>行业趋势</div>
        </div>
      </div>
      <div class="label_one">
        <div class="label_box border-right" @click="quotaClick">
          <div>
            <img src="~img/lookAround/quota_calculation_icon.svg" alt="" />
          </div>
          <div>额度测算</div>
        </div>
        <div class="label_box border-right" @click="shellIdentification">
          <div>
            <img src="~img/lookAround/shell_identification.svg" alt="" />
          </div>
          <div>空壳识别</div>
        </div>
        <div class="label_box border-right" @click="businessVerification">
          <div>
            <img src="~img/lookAround/business_verification.svg" alt="" />
          </div>
          <div>经营核查</div>
        </div>
      </div>
    </div> -->
  </div>
</template>
<script>
import {
  getICInfoByCorpKey,
  fullAmountCorp,
  unsubscribeCompany,
  subscribeCompany,
} from "@/interfaces/lookAround/index.js";
import { Toast, Dialog } from "vant";
import businessInformation from "./businessInformation";
export default {
  name: "",
  /*1. Vue扩展 */
  extends: "", // extends和mixins都扩展逻辑，需要重点放前面
  mixins: [],
  components: { businessInformation },
  /* 2. Vue数据 */
  props: {},
  model: { prop: "", event: "" }, // model 会使用到 props
  data() {
    return {
      interestStatus: false,
      details: {}, //路由接收的参数
      delAll: {}, // 公司详情全部信息
      jkJbxxSfxx: {}, //页面部分需要从delAll拿到的信息
    };
  },
  computed: {},
  watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
  /* 3. Vue资源 */
  filters: {},
  directives: {},
  /* 4. Vue生命周期 */
  created() {},
  mounted() {
    // this.details = JSON.parse(this.$route.query.item);
    // console.log(this.details, "this.$route.query.corpKey");
    // this.getDetails();
    this.getresAll();
  },
  destroy() {},
  /* 5. Vue方法 */
  methods: {
    // async getDetails() {
    //   const params = {
    //     corpKey: this.$route.query.corpKey,
    //   };
    //   const res = await getICInfoByCorpKey({ ...params });
    //   console.log(res, "res22");
    // },
    async getresAll() {
      const params = {
        // latitude: this.details.latitude || "",
        // longitude: this.details.longitude || "",
        corpKey: this.$route.query.corpKey,
        // distance: this.details.distance || "",
      };
      const res = await getICInfoByCorpKey({ ...params });
      console.log(res, "成功");
      this.details = res.data.jkJbxxSfxx;
      this.delAll = res.data;
      this.jkJbxxSfxx = res.data.jkJbxxSfxx;
      if(this.jkJbxxSfxx.d2Kjsbrs&&this.jkJbxxSfxx.d2Kjsbrs==0){
        this.jkJbxxSfxx.d2Kjsbrs='-'
      }
      console.log(this.jkJbxxSfxx, "成功");
    },
    // 点击关注按钮
    async interestClick() {
      if (this.jkJbxxSfxx.status == false) {
        // 关注
        const params = {
          companyId: this.jkJbxxSfxx.corpKey,
        };
        console.log(params);
        const res = await subscribeCompany({ ...params });
        console.log(res, "成功");
        if (res.data) {
          this.jkJbxxSfxx.status = true;
          Toast(res.data);
        } else {
          Toast(res.msg);
        }
      } else {
        // 取消关注
        const params = {
          companyId: this.jkJbxxSfxx.corpKey,
        };
        const res = await unsubscribeCompany({ ...params });
        console.log(res);
        Dialog.confirm({
          title: "",
          message: "您确定取消关注吗？",
        })
          .then(() => {
            if (res.data) {
              this.jkJbxxSfxx.status = false;
              Toast(res.data);
            } else {
              Toast(res.msg);
            }
          })
          .catch(() => {
            // on cancel
          });
      }
    },
    addressClick() {
      console.log("11");
    },
    businessInforClick() {
      let delAll = JSON.stringify(this.delAll);
      this.$router.push({
        path: "/businessInformation",
        query: {
          delAll: delAll,
          color: this.details.background,
        },
      });
    },
    informationRat() {
      // this.$router.push("/informationRating");
      let delAll = JSON.stringify(this.delAll);
      let details = JSON.stringify(this.details);
      this.$router.push({
        path: "/informationRating",
        query: {
          delAll: delAll,
          details: details,
          color: this.details.background,
        },
      });
    },
    businessTrends() {
      let delAll = JSON.stringify(this.delAll);
      this.$router.push({
        path: "/businessTrends",
        query: {
          delAll: delAll,
          color: this.details.background,
        },
      });
    },
    industryTrends() {
      this.$router.push({
        path: "/industryTrends",
        query: {
          corpKey: this.delAll.jkJbxxSfxx.corpKey,
          d2CorpName: this.delAll.jkJbxxSfxx.d2CorpName,
          d2Industryco: this.delAll.jkJbxxSfxx.d2Industryco,
        },
      });
    },
    quotaClick() {
      let delAll = JSON.stringify(this.delAll);
      this.$router.push({
        path: "/calculation_quota",
        query: {
          corpKey: this.details.corpKey,
          color: this.details.background,
          delAll: delAll,
        },
      });
    },
    shellIdentification() {
      // this.$router.push("/shellIdentification");
      let delAll = JSON.stringify(this.delAll);
      this.$router.push({
        path: "/shellIdentification",
        query: {
          corpKey: this.details.corpKey,
          color: this.details.background,
          delAll: delAll,
        },
      });
    },
    businessVerification() {
      // this.$router.push("/businessVerification");
      let delAll = JSON.stringify(this.delAll);
      this.$router.push({
        path: "/businessVerification",
        query: {
          corpKey: this.details.corpKey,
          color: this.details.background,
          delAll: delAll,
        },
      });
    },
  },
};
</script>
<style scoped lang="scss">
.box {
  height: 100%;
  position: relative;
  overflow: auto;
}
.box::-webkit-scrollbar {
  display: none;
}
.logon {
  background-color: #fff7e9;
  color: #d3a44a;
  height: 25px;
  line-height: 25px;
  padding: 0 10px;
  font-size: 12px;
  // position: fixed;
  width: 100%;
  top: 0;
}
.company_title {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  // height: 60px;
  // align-items: center;
  // margin-top: 20px;
  //   background-color: red;
}
.enterprise_icon {
  width: 38px;
  height: 37px;
  line-height: 15px;
  padding: 4px 1px 1px 0;
  background-color: #d99d9a;
  font-size: 13px;
  color: white;
  text-align: center;
  border-radius: 5px;
  margin-top: 5px;
}
.company_name {
  font-size: 17.33px;
  color: #000000;
  font-family: "PuHuiTi65";
}
.company_Labeling {
  color: #989898;
  margin-top: 5px;
  font-size: 14px;
}
.interest {
  color: #000000;
  font-size: 9.33px;
  // font-weight: bold;
}
.interest_icon {
  img {
    width: 20px;
  }
}
.interest_box {
  width: 40px;
  text-align: center;
}
.company_nameLabeling {
  padding-left: 10px;
  flex: 1;
}
.enterprise_type_box {
  display: flex;
  flex-wrap: wrap;
  padding: 0 10px;
  // margin-top: 10px;
  // justify-content: space-between;
}
.enterprise_type {
  font-size: 14px;
  padding: 0px 10px;
  height: 20px;
  line-height: 20px;
  font-weight: 500;
  font-family: "PuHuiTi65";
  margin-top: 5px;
}
.djs_enterprise {
  widows: 115px;
  font-size: 13px;
  color: #4ba87b;
  // font-weight: bold;
  border: 1px solid #4ba87b;
  margin-right: 10px;
}
.gxjs_enterprise {
  widows: 115px;
  font-size: 13px;
  color: #3282e4;
  // font-weight: bold;
  border: 1px solid #3282e4;
}
.kjx_enterprise {
  widows: 115px;
  font-size: 13px;
  color: #9f6c3f;
  // font-weight: bold;
  border: 1px solid #9f6c3f;
}
.enterprise_info {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  margin-top: 10px;
}
.enterprise_info_title {
  color: #989898;
  // font-weight: bold;
  font-size: 13px;
}
.enterprise_info_name {
  margin-top: 2px;
  font-size: 14px;
}
.enterprise_info_box {
  width: 90px;
  height: 50px;
  // background-color: red;
}
.enterprise_info_cut {
  height: 30px;
  width: 1px;
  background-color: #f4f4f4;
  // background-color: red;
}
.general_situation {
  display: flex;
  //   margin-top: 10px;
  padding: 10px 10px;
}
.industry_classification {
  flex: 1;
  border-radius: 5px;
  background-color: #f6f6f6;
  padding: 10px 15px;
}
.people_number {
  width: 120px;
  padding: 10px 15px;
  border-radius: 5px;
  background-color: #f6f6f6;
  margin-left: 10px;
}
.general_situation_name {
  color: #989898;
  font-size: 12.67px;
}
.general_situation_text {
  font-weight: 500;
  font-size: 13.3px;
  font-family: "PuHuiTi65";
  margin-top: 3px;
}
.big_club {
  width: 100%;
  height: 7px;
  background-color: #f6f6f6;
}
.basic_info {
  padding: 0 10px;
}
.Enterprise_Info_three {
  display: flex;
  // height: 32px;
  // line-height: 32px;
  padding: 10px;
  font-family: "PuHuiTi65";
}
.small_club {
  height: 1px;
  width: 100%;
  background-color: #f4f4f4;
}
.telephone_icon {
  // margin-top: 2px;
  display: flex;
  align-items: center;
  img {
    width: 15px;
  }
}
.Enterprise_Info_four {
  display: flex;
  align-items: center;
  padding: 10px;
  // height: 32px;
  // line-height: 32px;
}

.cut_apart2 {
  width: 1px;
  height: 13px;
  background-color: #9f9f9f;
  margin: 5px;
}
.coordinate_number {
  font-size: 13px;
  margin-left: 3px;
}
.coordinate_name {
  font-size: 13.3px;
  color: #3282e4;
  // overflow: hidden; //超出的文本隐藏
  // text-overflow: ellipsis; //溢出用省略号显示
  // white-space: nowrap; // 默认不换行；
  // font-family: "PuHuiTi65";
}
.label_box {
  width: 25%;
  height: 100px;
  //   background-color: red;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  border-bottom: 1.5px solid #f6f6f6;
  font-family: "PuHuiTi65";
  font-size: 14px;
  img {
    width: 27px;
    // height: 27px;
  }
}
.label_one {
  display: flex;
}
.border-right {
  border-right: 1.5px solid #f6f6f6;
}
.telephone_number {
  color: #3282e4;
  font-size: 14px;
  margin-left: 3px;
}
::v-deep .van-dialog__message {
  font-size: 20px !important;
}
</style>
